<template>
  <div id="">
    <button>切换</button>
    <input type="text" v-model="value">
    <!-- 可以自定义参数，修饰符 -->
    <div v-move:aa.bb="{ background: value }" :style="{width:'200px',height:'200px'}"></div>
  </div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding, ref } from 'vue';
let value = ref<string>('')
// 定义一个泛型用于类型推导
type Dir = {
  background: string
}
// 自定义指令必须v开头，是Directive类型
const vMove: Directive = {
  // 有生命周期
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  // 可以接收多个参数,第一个是当前的节点，第二个里面保存了自定义组件传过来的值，第三个是当前节点的虚拟DOM
  mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
    console.log(dir.value.background);
    el.style.background = 'aqua'
  },
  beforeUpdate(el: HTMLElement, dir: DirectiveBinding<Dir>) {
    el.style.background = dir.value.background
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}

</script>

<style lang="less" scoped>
</style>
